// import { Text, View, Image } from "@tarojs/components";
// import folder from "@/assets/images/folder.png";
// import styles from "./style.scss";
// import Taro from "@tarojs/taro";
// import { CSSProperties, useMemo } from "react";
// import { getToken } from "@/utils/token";
// import { Uploader } from "@nutui/nutui-react-taro";
// import { MaskClose } from "@nutui/icons-react-taro";
// import { getImgUrl } from "@/utils";

// type Props = {
//   tip?: string;
//   maxCount?: number;
//   maxFileSize?: number;
//   value?: API.Files[];
//   onChange?: (files: API.Files[]) => void;
//   remaks?: string[];
//   example?: string;
//   type?: "file" | "image";
//   readOnly?: boolean;
//   style?: CSSProperties;
// };
// // 下载
// export const downloadFile = (file: API.Files) => {
//   Taro.downloadFile({
//     url: file.fileUrl,
//     success() {
//       Taro.showToast({ title: "下载成功" });
//     },
//     fail() {
//       Taro.showToast({ title: "下载失败", icon: "error" });
//     },
//   });
// };

// export default (props: Props) => {
//   const {
//     maxCount = 1,
//     maxFileSize = 20,
//     tip,
//     value,
//     onChange,
//     remaks,
//     example,
//     type = "file",
//     readOnly,
//     style,
//   } = props;

//   const uplpadRequest = () => {
//     Taro.chooseImage({
//       sourceType: ["album"],
//       success(res) {
//         const tempFilePath = res.tempFilePaths[0];
//         const { originalFileObj, size } = res.tempFiles[0];

//         if (size >= maxFileSize * 1024 * 1024) {
//           Taro.showToast({ title: `文件大小超过${maxFileSize}MB` });
//           return;
//         }

//         Taro.uploadFile({
//           url: "http://8.137.109.35:9999/file/upload",
//           filePath: tempFilePath,
//           fileName: originalFileObj?.name,
//           header: {
//             Authorization: getToken(),
//           },
//           name: "multipartFile",
//           success({ data }) {
//             console.log(data)
//             try {
//               const result =getImgUrl(JSON.parse(data)?.data);
//               onChange?.([...(value || []), result]);
//             } catch (e) {
//               Taro.showToast({ title: "上传失败", icon: "none" });
//             }
//           },
//         });
//       },
//     });
//   };

//   // 删除
//   const deleteFile = (index: number) => {
//     onChange?.(value?.filter((_d, i) => index !== i) || []);
//   };

//   // 是否可上传
//   const isUplpoad = useMemo(
//     () => !readOnly && (value?.length || 0) < maxCount,
//     [value, maxCount, readOnly]
//   );
//   return (
//     <View className={styles.container} style={style}>
//       {tip && <View className={styles.tip}>{tip}</View>}
//       {example && (
//         <Text
//           className={styles.example}
//           onClick={() => {
//             Taro.previewImage({
//               current: "",
//               urls: [example],
//             });
//           }}
//         >
//           示例
//         </Text>
//       )}
//       {!!remaks?.length && (
//         <View className={styles.remaksWrap}>
//           {remaks.map((text, index) => (
//             <View key={index}>{text}</View>
//           ))}
//         </View>
//       )}

//       {/* 文件上传模板 */}
//       {type === "file" && (
//         <View className={styles.fileWrap}>
//           {value?.map((item, index) => (
//             <View className={styles.fileListItem} key={index}>
//               <View className={styles.left}>
//                 <Image src={folder} className={styles.icon} />
//                 <Text className={styles.fileName}>{item.fileName}</Text>
//               </View>
//               <View className={styles.right}>
//                 <Text
//                   className={styles.btn}
//                   onClick={() => {
//                     Taro?.previewImage({
//                       current: "",
//                       urls: [item?.fileUrl],
//                     });
//                   }}
//                 >
//                   预览
//                 </Text>
//                 <Text className={styles.btn} onClick={() => downloadFile(item)}>
//                   下载
//                 </Text>
//                 {readOnly || (
//                   <Text
//                     className={styles.btn}
//                     onClick={() => deleteFile(index)}
//                   >
//                     删除
//                   </Text>
//                 )}
//               </View>
//             </View>
//           ))}
//           {isUplpoad &&
//             (value?.length ? (
//               <View className="form_item_button_block" onClick={uplpadRequest}>
//                 <Uploader />
//                 继续上传
//               </View>
//             ) : (
//               <View className={styles.uploader} onClick={uplpadRequest}>
//                 {/* <Image src={file_upload} className={styles.icon} /> */}
//                 <Text>点击选择文件上传</Text>
//               </View>
//             ))}
//         </View>
//       )}
//       {type === "image" && (
//         <View className={styles.imageWrap}>
//           {value?.map((item, index) => (
//             <View key={index} className={styles.imagWrap}>
//               <Image
//                 className={styles.image}
//                 src={item}
//                 mode="scaleToFill"
//               />
//               {/* <CircleClose
//                 className={styles.close}
//                 onClick={(e) => {
//                   e.stopPropagation();
//                   onChange?.(value?.filter((_d, i) => index !== i));
//                 }}
//               /> */}
//               <MaskClose
//                 className={styles.close}
//                 onClick={(e) => {
//                   e.stopPropagation();
//                   onChange?.(value?.filter((_d, i) => index !== i));
//                 }}
//               />
//             </View>
//           ))}
//           {isUplpoad && (
//             <View className={styles.uploader}>
//               <Uploader className={styles.icon} onClick={uplpadRequest} />
//             </View>
//           )}
//         </View>
//       )}
//     </View>
//   );
// };

import { View, Image } from "@tarojs/components";
import styles from "./style.scss";
import Taro from "@tarojs/taro";
import { CSSProperties, useMemo, useState } from "react";
import { getToken } from "@/utils/token";
import { Loading1, MaskClose, Upload } from "@nutui/icons-react-taro";
import { getImgUrl } from "@/utils";

type Props = {
  maxCount?: number;
  maxFileSize?: number;
  value?: API.Files[];
  onChange?: (files: API.Files[]) => void;
  readOnly?: boolean;
  style?: CSSProperties;
};
// 下载
export const downloadFile = (file: API.Files) => {
  Taro.downloadFile({
    url: file.fileUrl,
    success() {
      Taro.showToast({ title: "下载成功" });
    },
    fail() {
      Taro.showToast({ title: "下载失败", icon: "error" });
    },
  });
};

export default (props: Props) => {
  const {
    maxCount = 1,
    maxFileSize = 20,
    value,
    onChange,
    readOnly,
    style,
  } = props;
  const [loading, setLoading] = useState(false);
  const uplpadRequest = () => {
    if(loading) return
    Taro.chooseImage({
      sourceType: ["album"],
      success(res) {
        const tempFilePath = res.tempFilePaths[0];
        const { originalFileObj, size } = res.tempFiles[0];

        if (size >= maxFileSize * 1024 * 1024) {
          Taro.showToast({ title: `文件大小超过${maxFileSize}MB` });
          return;
        }
        setLoading(true);
        Taro.uploadFile({
          url: "http://8.137.109.35:9999/file/upload",
          filePath: tempFilePath,
          fileName: originalFileObj?.name,
          header: {
            Authorization: getToken(),
          },
          name: "multipartFile",

          success({ data }) {
            setLoading(false);
            try {
              const result = JSON.parse(data)?.data;
              onChange?.([...(value || []), result]);
            } catch (e) {
              Taro.showToast({ title: "上传失败", icon: "none" });
            }
          },
        });
      },
    });
  };
  // 是否可上传
  const isUplpoad = useMemo(
    () => !readOnly && (value?.length || 0) < maxCount,
    [value, maxCount, readOnly]
  );
  return (
    <View className={styles.container} style={style}>
      <View className={styles.imageWrap}>
        {value?.map((item, index) => (
          <View key={index} className={styles.imagWrap}>
            <Image
              className={styles.image}
              src={getImgUrl(item)}
              mode="scaleToFill"
            />
            <MaskClose
              className={styles.close}
              onClick={(e) => {
                e.stopPropagation();
                onChange?.(value?.filter((_d, i) => index !== i));
              }}
            />
          </View>
        ))}
        {isUplpoad && (
          <View className={styles.uploader} onClick={uplpadRequest}>
            {loading ? <Loading1 /> : <Upload className={styles.icon} />}
          </View>
        )}
      </View>
    </View>
  );
};
